import { Pie, Column } from '@ant-design/plots'
import { CommonSmallTitle } from '../../Assets/Common/SmallTitle'
import { AfterList, PieTemplate, singularColumnTemplate } from '../Template'

import { useRef, useState } from 'react'
import { useRequest, useSize } from 'ahooks'
import { project } from '../../../../Common/Data'
import { Http } from '../../../../Common/Api'
import { useEffect } from 'react'
import { FrontModalBox } from '../../Assets/Modal'
const { imageUrl } = project[window.location.hostname]

const PieColor = ['rgba(111, 175, 255, 1)', 'rgba(255, 234, 65, 1)', 'rgba(255, 155, 65, 1)', 'rgba(255, 92, 92, 1)']

export const OneA01 = () => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const [Data, setData] = useState({})
    const [DataPer, setDataPer] = useState([])

    const { runAsync: getOne } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const { dCount, ybCount, jdCount, zdCount } = res[0]
            setDataOne({ dCount, ybCount, jdCount, zdCount })
            setDataPer([
                { type: '低风险', value: dCount },
                { type: '一般风险', value: ybCount },
                { type: '较大风险', value: jdCount },
                { type: '重大风险', value: zdCount },
            ])
        },
    })

    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const { noneHandledCount, noneHandledStatList, statList } = res
            setData(res)
            const data = JSON.parse(
                JSON.stringify([...noneHandledStatList])
                    .replace(/algorithmId/g, 'uuid')
                    .replace(/algorithmName/g, 'label')
                    .replace(/count/g, 'value'),
            )
            setListTwo(data.map(item => ({ ...item, unit: '次', color: 'rgba(255, 202, 91, 1)' })))
            setDataFou(statList.map(({ algorithmName, count }) => ({ label: algorithmName, 预警数量: count })))
            setNumber(noneHandledCount)
        },
    })

    const [ListTwo, setListTwo] = useState([])

    const ListOne = [
        { uuid: 1, label: '低风险', value: 'dCount', unit: '次', color: 'rgba(111, 175, 255, 1)' },
        { uuid: 2, label: '一般风险', value: 'ybCount', unit: '次', color: 'rgba(255, 234, 65, 1)' },
        { uuid: 3, label: '较大风险', value: 'jdCount', unit: '次', color: 'rgba(255, 155, 65, 1)' },
        { uuid: 4, label: '重大风险', value: 'zdCount', unit: '次', color: 'rgba(255, 92, 92, 1)' },
    ]
    const dataThr = [
        // { uuid: 1, label: '已识别图片', value: 'totalAlarmCount', unit: '张', color: 'rgba(172, 255, 156, 1)' },
        { uuid: 2, label: '监控设备数量', value: 'superviseDeviceCount', unit: '台', color: 'rgba(255, 155, 65, 1)' },
        {
            uuid: 3,
            label: '正在监控项目数',
            value: 'superviseProjectCount',
            unit: '个',
            color: 'rgba(64, 252, 255, 1)',
        },
    ]

    const [DataOne, setDataOne] = useState()
    const [DataFou, setDataFou] = useState([])
    const [number, setNumber] = useState(0)

    useEffect(() => {
        runAsync({ url: 'getAiStats' })
        getOne({ url: 'getJTGJSuperviseTypeList' })
    }, [runAsync, getOne])

    const [OptionsCall, setOptionsCall] = useState()

    const onA01 = IsHandle => {
        setOptionsCall({
            type: 'TableList',
            data: {
                title: 'AI预警明细',
                type: 'AiPictureTables',
                OrganizationUuid: 'AILeftOrgTree',
                data: { IsHandle },
                uuid: { IsHandle },
            },
        })
    }
    const onA02 = (_, e) => {
        setOptionsCall({
            type: 'TableList',
            data: {
                title: 'AI预警明细',
                type: 'AiPictureTables',
                OrganizationUuid: 'AILeftOrgTree',
                data: { IsHandle: 0 },
                uuid: { AlgorithmName: e, IsHandle: 0 },
            },
        })
    }
    const onA03 = (id, label) => {
        setOptionsCall({
            type: 'TableList',
            data: {
                title: `AI预警明细`,
                type: 'AiPictureTables',
                OrganizationUuid: 'AILeftOrgTree',
                uuid: { AlgorithmId: id },
            },
        })
    }

    return (
        <div className="OneA01">
            <div className="Top">
                <img src={imageUrl + 'indexL.png'} alt="" />
                <div>
                    <div>
                        Al己监控 <span style={{ color: 'rgba(144, 224, 255, 1)' }}>{Data?.superviseDays || 0}</span>
                        天, 发现
                        <span onClick={() => onA01(2)} style={{ color: 'rgba(255, 75, 46, 1)', cursor: 'pointer' }}>
                            {Data?.totalAlarmCount || 0}
                        </span>
                        条预警,
                    </div>
                    <div>
                        己处理
                        <span onClick={() => onA01(1)} style={{ color: 'rgba(69, 255, 121, 1)' }}>
                            {Data?.handledCount || 0}
                        </span>
                        条预警, 未处理
                        <span onClick={() => onA01(0)} style={{ color: 'rgba(255, 156, 113, 1)', cursor: 'pointer' }}>
                            {Data?.noneHandledCount || 0}
                        </span>
                        条预警.
                    </div>
                </div>
                <img src={imageUrl + 'intelligence.gif'} alt="" />
            </div>
            <div className="Btm">
                {/* <CommonSmallTitle title="风险点统计" flex={462} style={{ marginRight: 16 }}>
                    <div className="one">
                        <Pie
                            {...PieTemplate({
                                data: DataPer,
                                color: PieColor,
                                size: 220,
                            })}
                        />
                        <AfterList
                            list={ListOne}
                            data={DataOne}
                            style={{
                                '--DivWidth': '100%',
                                '--FirstSize': '34px',
                                '--LastSize': '24px',
                                '--AfterHight': '12px',
                                '--AfterBtm': '4px',
                            }}
                        />
                    </div>
                </CommonSmallTitle> */}
                <CommonSmallTitle title="未处理预警统计" flex={462} style={{ marginRight: 16 }}>
                    <div className="two">
                        <div className="Image">
                            <div>{number}</div>
                            <img src={imageUrl + 'OtherOne.png'} alt="" />
                        </div>
                        <AfterList
                            list={ListTwo}
                            style={{
                                '--DivWidth': '100%',
                                '--FirstSize': '34px',
                                '--LastSize': '24px',
                                '--AfterHight': '12px',
                                '--AfterBtm': '4px',
                            }}
                            click={onA02}
                        />
                    </div>
                </CommonSmallTitle>
                <CommonSmallTitle className="ItemTitle" title="AI预警统计" flex={921}>
                    <div className="thr">
                        <div>
                            {dataThr.map(({ uuid, label, value, color, unit }) => (
                                <div
                                    key={uuid}
                                    onClick={() => {
                                        if (uuid === 1) onA01()
                                        if (uuid === 3 || uuid === 2) {
                                            setOptionsCall({
                                                type: 'CameraModal',
                                                data: { title: '正在监控的项目详情' },
                                            })
                                        }
                                    }}
                                >
                                    <div style={{ color }}>{label}</div>
                                    <div>
                                        {Data ? Data[value] : 0} {unit}
                                    </div>
                                </div>
                            ))}
                        </div>
                        <div ref={ChartsBox}>
                            {size && (
                                <Column
                                    {...singularColumnTemplate({
                                        size,
                                        yField: '预警数量',
                                        data: DataFou,
                                        color: '#B2FBFD',
                                        autoRotate: true,
                                        yTitle: '次数',
                                    })}
                                    onReady={plot =>
                                        plot.on('plot:click', e => {
                                            const { x, y } = e
                                            const [{ data }] = plot.chart.getTooltipItems({ x, y })
                                            setOptionsCall({
                                                type: 'TableList',
                                                data: {
                                                    title: 'AI预警明细',
                                                    type: 'AiPictureTables',
                                                    OrganizationUuid: 'AILeftOrgTree',
                                                    data: { IsHandle: 2 },
                                                    uuid: { AlgorithmName: data.label, IsHandle: 2 },
                                                },
                                            })
                                        })
                                    }
                                />
                            )}
                        </div>
                    </div>
                </CommonSmallTitle>
            </div>
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}
